<template>
  <div>
    <div class="topSearch">
      <div class="topSearchLeft">
        <el-row :gutter="20">
          <el-form ref="form" :inline="true" :model="form" label-width="80px">
            <el-row class="btnRow">
              <el-col :span="6" class="elrow">
                <el-form-item>
                  <p>订单号:</p>
                  <el-input
                    :style="{ width: '200px' }"
                    v-model="orderCode"
                    placeholder="订单号"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" class="elrow">
                <el-form-item>
                  <p>买家账号:</p>
                  <el-input
                    :style="{ width: '200px', marginLeft: '10px' }"
                    v-model="account"
                    placeholder="请输入要查询的买家账号"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" class="elrow">
                <el-form-item>
                  <p>订单状态:</p>
                  <el-select
                    v-model="orderStatus"
                    placeholder="订单状态"
                    filterable
                    clearable
                    :style="{ width: '200px', marginLeft: '10px' }"
                  >
                    <el-option
                      v-for="(item, index) in AttributesSelect"
                      :key="index"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :class="!showAll ? 'btnRow' : 'unBtnRow'">
              <el-col
                :span="7"
                style="
                  width: 500px;
                  margin-top: -30px;
                  margin-right: 23px;
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                "
              >
                <el-form-item>
                  <p style="margin-right: 10px">日期选择:</p>
                  <el-date-picker
                    v-model="searchBeginTime"
                    class="input-with-select"
                    placeholder="请输入开始日期"
                    style="width: 200px"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-date-picker
                    v-model="searchEndTime"
                    class="input-with-select"
                    placeholder="请输入结束日期"
                    style="width: 200px"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>

        <!-- <el-form-item> </el-form-item> -->
      </div>
      <div class="topSearchRight">
        <el-button
          type="primary"
          :style="{ marginLeft: '20px' }"
          @click="searchOrder"
        >
          查询
        </el-button>
        <el-button :style="{ marginLeft: '20px' }" @click="clearAll">
          重置
        </el-button>
        <el-row>
          <el-col :span="1.5" class="elrowBtn">
            <el-button type="text" size="max" @click="closeSearch">
              {{ word }}
              <i
                :class="showAll ? 'el-icon-arrow-down ' : 'el-icon-arrow-up'"
              ></i>
            </el-button>
          </el-col>
        </el-row>
        <div>
          <!-- <el-col :span="1.5" class="elrow">
            <el-form-item>
              <el-button type="text" size="mini" @click="closeSearch">
                {{ word }}
                <i
                  :class="showAll ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"
                ></i>
              </el-button>
            </el-form-item>
          </el-col> -->
        </div>
      </div>
    </div>
    <div class="ordershipped">
      <!-- <div class="SecondRow">
        <div>
          <el-button size="mini" :style="{ marginLeft: '20px' }" round
            >导出</el-button
          >
          <el-button
            @click="searchOrder"
            size="mini"
            :style="{ marginLeft: '20px' }"
            round
            >刷新</el-button
          >
          <el-button
            @click="clearAll"
            size="mini"
            :style="{ marginLeft: '20px' }"
            round
            ></el-button
          >
        </div>
      </div> -->
      <div class="SecondRow">
        <div class="SecondRowLeft">
          <!-- <el-button
            :disabled="isButtonDisabled"
            size="medium"
            @click="clearAll"
          >
            清空
          </el-button> -->
        </div>
        <div class="SecondRowRight">
          <el-button type="primary" plain @click="handleDownload">
            导出
          </el-button>
          <el-button circle icon="el-icon-refresh-right" @click="searchOrder">
          </el-button>
          <!-- <el-button round size="mini" @click="addgoods">添加商品</el-button> -->
        </div>
      </div>
      <div class="DataTableDiv">
        <el-table
          v-loading="searchOrderloading"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="SelloutData"
          border
          style="width: 100%"
          layout="fixed"
          empty-text="暂无数据"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="55"> </el-table-column>
          <el-table-column fixed label="排序" prop="sort" min-width="70">
            <template slot-scope="scope">
              <div class="flex-container">
                <span class="flex-item">
                  <!-- 序号 -->
                  {{ scope.$index + 1 }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="buyerName" label="用户" min-width="150">
          </el-table-column>
          <el-table-column prop="account" label="买家账号" min-width="180">
          </el-table-column>
          <el-table-column prop="orderCode" label="订单号" min-width="280">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" min-width="230">
          </el-table-column>
          <el-table-column label="实付款" min-width="100">
            <template slot-scope="prop">
              <span>{{ prop.row.paidAmount / 100 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" min-width="120">
            <!-- ///{ name: "待付款", value: 1 }, -->
            <!-- { name: "待审核", value: 2 },
        { name: "待发货", value: 3 },
        { name: "待收货", value: 4 },
        { name: "待评价", value: 5 },
        { name: "已完成", value: 6 },
        { name: "已驳回", value: 7 },
        { name: "已取消", value: 8 },
        { name: "退款完成", value: 9 }, -->
            <template slot-scope="prop">
              <span
                class=""
                style="color: #606266"
                v-if="prop.row.orderStatus == 8"
                >已取消</span
              >
              <span class="" style="color: red" v-if="prop.row.orderStatus == 3"
                >待发货</span
              >
              <span class="" style="color: red" v-if="prop.row.orderStatus == 1"
                >待付款</span
              >
              <span class="" style="color: red" v-if="prop.row.orderStatus == 2"
                >待审核</span
              >
              <span class="" style="color: red" v-if="prop.row.orderStatus == 4"
                >待收货</span
              >
              <span
                class=""
                style="color: #ecab3c"
                v-if="prop.row.orderStatus == 5"
                >待评价</span
              >
              <span
                class=""
                style="color: #67c23a"
                v-if="prop.row.orderStatus == 6"
                >已完成</span
              >
              <span class="" style="color: red" v-if="prop.row.orderStatus == 7"
                >已驳回</span
              >
              <span
                class=""
                style="color: #e6a23c"
                v-if="prop.row.orderStatus == 9"
                >退款完成</span
              >
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="255">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看详情</el-button
              >
              <!-- {{ scope.row }} -->
              <el-button
                v-if="scope.row.orderStatus == 3"
                @click="ConfirmDelivery(scope.row)"
                type="text"
                size="small"
                >确认发货</el-button
              >
              <el-button
                v-if="scope.row.orderStatus == 4"
                @click="CancelDelivery(scope.row)"
                type="text"
                size="small"
                >取消发货</el-button
              >
              <el-button
                v-if="scope.row.orderStatus == 6"
                @click="checkLogistics(scope.row)"
                type="text"
                size="small"
                >查看物流</el-button
              >
              <el-button
                v-if="scope.row.orderStatus == 2"
                @click="audit(scope.row)"
                type="text"
                size="small"
                >审核</el-button
              >
            </template>
          </el-table-column>
          <!-- <div slot="empty">暂无数据</div> -->
        </el-table>
      </div>
      <!-- <div class="paging" v-if="total > 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div> -->
      <div class="paging" v-if="total > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!--查看订单详情组件 -->
    <OrderModel
      ref="modelRef"
      v-show="centerDialogVisible"
      :centerDialogVisible="centerDialogVisible"
      :currentRow="detailOrder"
      @cancelgoodesmodel="cancelgoodesmodel"
    />
    <div>
      <el-dialog
        title="订单发货"
        :visible.sync="orderDelivery"
        width="30%"
        :close-on-click-modal="false"
      >
        <span></span>
        <el-form :model="deliveForm" :inline="true" label-width="80px">
          <el-form-item label="收货人">
            <span
              >联系人：{{
                detailOrder.buyerName +
                " " +
                "/" +
                " " +
                detailOrder.consigneePhone
              }}</span
            >
            <div>
              地址：{{
                detailOrder.proviceName +
                detailOrder.cityName +
                detailOrder.countyName +
                detailOrder.consigneeAddress
              }}
            </div>
          </el-form-item>
          <el-form-item label="发货单号">
            <el-input
              :style="{ width: '380px', marginLeft: '20px' }"
              v-model="deliveForm.expressCode"
              type="text"
              placeholder="请填写快递单号（必填）"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="orderDelivery = false">取 消</el-button>
          <el-button type="primary" @click="orderDeliverys">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="取消发货"
        :visible.sync="delivery"
        width="30%"
        :close-on-click-modal="false"
      >
        <span></span>
        <el-form
          ref="editForm"
          :model="editForm"
          :inline="true"
          label-width="80px"
        >
          <el-form-item>
            <el-input
              :style="{ width: '380px', marginLeft: '20px' }"
              v-model="editForm.cancelReason"
              type="textarea"
              placeholder="请写取消理由"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delivery = false">取 消</el-button>
          <el-button type="primary" @click="deliveryReason">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 查看物流 -->
    <div>
      <el-dialog
        title="物流信息"
        :visible.sync="check"
        width="30%"
        :close-on-click-modal="false"
      >
        <span></span>

        <span slot="footer" class="dialog-footer">
          <el-button @click="check = false">取 消</el-button>
          <el-button type="primary" @click="check = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- //审核弹窗 -->
    <div>
      <el-dialog
        title="审核"
        :visible.sync="AuditPopup"
        width="30%"
        :close-on-click-modal="false"
      >
        <span></span>
        <el-form
          ref="editForm"
          :model="editForm"
          :inline="true"
          label-width="80px"
        >
          <el-form-item>
            <el-input
              :style="{ width: '380px', marginLeft: '20px' }"
              v-model="editForm.rejectReason"
              type="textarea"
              placeholder="若是驳回请填写驳回理由！"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="consent">同意</el-button>
          <el-button type="primary" @click="turnDown">驳回</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  orderPageListForSeller,
  getOrderDetails,
  orderUpdate,
} from "@/api/mallApi/congLinMall";
import OrderModel from "@/views/mall/managementend/ordergoods/order-manage/order-model.vue";
import { ExportOrderData } from "@/api/mallApi/goodsOnsell/goodsOnsell";
export default {
  name: "AllOrders",
  components: {
    OrderModel,
  },
  data() {
    return {
      showAll: false,
      delivery: false,
      check: false,
      AuditPopup: false,
      form: {},
      editForm: {},
      orderCode: "", //订单号
      account: "", //买家账户
      orderStatus: null, //订单状态
      searchBeginTime: "", //开始时间
      searchEndTime: "", //结束时间
      searchOrderloading: false,
      //添加/修改 商品弹窗
      centerDialogVisible: false,
      currentRow: {}, // 保存当前行数据
      AttributesSelect: [
        { name: "待付款", value: 1 },
        { name: "待审核", value: 2 },
        { name: "待发货", value: 3 },
        { name: "待收货", value: 4 },
        { name: "待评价", value: 5 },
        { name: "已完成", value: 6 },
        { name: "已驳回", value: 7 },
        { name: "已取消", value: 8 },
        { name: "退款完成", value: 9 },
      ],
      SelloutData: [],
      selectedRows: [],
      isButtonDisabled: false, //checkbox 联动按钮
      currentPage: 1, //分页
      pageSize: 10, //,每页显示条数
      total: 0,
      detailOrder: {},
      deliveForm: {
        expressCode: "",
      },
      orderDelivery: false,
    };
  },
  computed: {
    word: function () {
      if (this.showAll == false) {
        //对文字进行处理
        return "收起";
      } else {
        return "展开";
      }
    },
    tableHeight() {
      if (this.showAll) {
        return window.innerHeight - 70;
      } else {
        return window.innerHeight - 70;
      }
    },
  },
  created() {
    this.orderPageListForSeller();
    // this.getOrderDetails();
  },
  watch: {
    selectedRows: {
      handler(newValue) {
        // 数组发生变化时，isButtonDisabled计算属性会重新计算，从而更新按钮的禁用状态
        console.log("123", newValue);
        if (newValue.length === 0) {
          this.isButtonDisabled = true;
        } else {
          this.isButtonDisabled = false;
        }
      },
      deep: true,
      immediate: true, // 立即执行处理函数
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.closeSearch();
    });
  },
  methods: {
    //驳回
    turnDown() {
      const { id } = this.deliveForm;
      const { rejectReason } = this.editForm;
      const values = {
        rejectReason,
        id,
        orderStatus: 7, //已驳回
      };
      console.log("tModOrderUpdate", values);
      orderUpdate(values).then((res) => {
        if (res.success && res.code === "00000") {
          this.AuditPopup = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
          // getOrderDetails({
          //   orderCode: this.currentRow.orderCode,
          // }).then((res2) => {
          // this.currentRow = res2.data;
          // });
        }
      });
      this.searchOrder();
    },
    //同意
    consent() {
      // const { id } = this.editForm;
      const { id } = this.deliveForm;
      const values = {
        id,
        orderStatus: 3, //待发货
      };
      console.log("tModOrderUpdate", values);
      orderUpdate(values).then((res) => {
        if (res.success && res.code === "00000") {
          this.AuditPopup = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
          // getOrderDetails({
          //   orderCode: this.currentRow.orderCode,
          // }).then((res2) => {
          //   this.currentRow = res2.data;
          // });
        }
      });
      this.searchOrder();
    },
    //打开审核弹窗
    audit(row) {
      this.AuditPopup = true;
      let aaa = {
        orderCode: row.orderCode,
      };
      this.getOrderDetails(aaa);
    },
    // 查看物流
    checkLogistics() {
      this.check = true;
    },
    handleDownload(e) {
      this.searchOrderloading = true;
      // 获取商品列表 --- 可分页
      const params = {
        type: 2,
        isPage: 1,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        orderCode: this.orderCode, // 订单号
        account: this.account, //买家账号
        orderStatus: this.orderStatus, // 订单状态
        searchBeginTime: this.searchBeginTime,
        searchEndTime: this.searchEndTime,
      };
      ExportOrderData(params)
        .then((res) => {
          if (res.status !== 200) return;
          const blob = new Blob([res.data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });
          const objectUrl = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = objectUrl; // 指定下载链接
          a.download = "出售中商品列表"; // 指定下载文件名
          a.click();
          URL.revokeObjectURL(a.href); // 释放URL对象
          this.searchOrderloading = false;
          this.$message({
            message: "导出成功",
            type: "success",
          });
        })
        .catch((error) => {
          this.searchOrderloading = false;
        });
    },
    orderDeliverys() {
      const { expressCode, id } = this.deliveForm;
      const values = {
        expressCode,
        id,
        orderStatus: 4,
      };

      orderUpdate(values).then((res) => {
        if (res.success && res.code === "00000") {
          this.orderDelivery = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
          // getOrderDetails({
          //   orderCode: this.detailOrder.orderCode,
          // }).then((res2) => {
          //   this.detailOrder = res2.data;
          // });
        }
      });
      this.searchOrder();
    },
    //确认发货按钮
    ConfirmDelivery(row) {
      let aaa = {
        orderCode: row.orderCode,
      };
      this.getOrderDetails(aaa);
      this.orderDelivery = true;
    },
    //取消发货按钮
    CancelDelivery(row) {
      console.log(row);
      let aaa = {
        orderCode: row.orderCode,
      };
      this.getOrderDetails(aaa);
      this.delivery = true;
    },
    deliveryReason() {
      const { cancelReason } = this.editForm; //只能解构出来cancelReason
      const { id } = this.deliveForm; //只能从这里结构出来ID
      const values = {
        cancelReason,
        id,
        orderStatus: 8,
      };
      console.log("tModOrderUpdate", this.editForm);
      console.log("bbb", this.deliveForm);
      console.log("values", values);
      orderUpdate(values).then((res) => {
        if (res.success && res.code === "00000") {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          // getOrderDetails({
          //   orderCode: this.currentRow.orderCode,
          // }).then((res2) => {
          //   this.currentRow = res2.data;
          // });
        }
        this.delivery = false;
      });
      this.searchOrder();
    },
    copyToClip(content) {
      var aux = document.createElement("textarea");
      aux.value = content;
      document.body.appendChild(aux);
      aux.select();
      document.execCommand("copy");
      document.body.removeChild(aux);
      Vue.prototype.$message({
        message: "复制成功",
        type: "success",
      });
    },
    //订单详情
    getOrderDetails(aaa) {
      getOrderDetails(aaa)
        .then((res) => {
          this.searchOrderloading = false;
          console.log("订单详情", res);
          this.detailOrder = res.data;
          this.deliveForm = this.detailOrder;
        })
        .catch(() => {
          this.searchOrderloading = false;
        });
    },
    orderPageListForSeller() {
      this.searchOrderloading = true;
      let reqData = {
        type: 2,
        isPage: 1,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        orderCode: this.orderCode, // 订单号
        account: this.account, //买家账号
        orderStatus: this.orderStatus, // 订单状态
        searchBeginTime: this.searchBeginTime,
        searchEndTime: this.searchEndTime,
      };
      orderPageListForSeller(reqData)
        .then((res) => {
          this.searchOrderloading = false;
          console.log("所有订单", res);
          this.SelloutData = res.data.list;
          this.total = Number(res.data.total);
        })
        .catch(() => {
          this.searchOrderloading = false;
        });
    },
    searchOrder() {
      this.orderPageListForSeller();
    },
    clearAll() {
      this.orderCode = "";
      this.account = "";
      this.orderStatus = "";
      this.searchBeginTime = "";
      this.searchEndTime = "";
      this.orderPageListForSeller();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.orderPageListForSeller();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.orderPageListForSeller();
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      console.log("选中的行数据：", this.selectedRows);
      // 在这里进行相应的操作，如发起请求等
    },
    handleClick(row) {
      // 点击编辑按钮时触发
      this.currentRow = row; // 将当前行数据保存起来
      console.log("row", row);
      let aaa = {
        orderCode: row.orderCode,
      };
      this.getOrderDetails(aaa);
      this.centerDialogVisible = true; // 打开弹窗
    },
    cancelgoodesmodel(data) {
      // 弹窗关闭时触发，可以在这里重置数据或进行其他操作
      this.currentRow = {};
      this.centerDialogVisible = data;
      this.enterType = 0;
    },
    //展开收起
    closeSearch() {
      this.showAll = !this.showAll;
    },
  },
};
</script>

<style scoped lang="scss">
.topSearch {
  width: 98%;
  margin: 1%;
  min-height: 65px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  .topSearchLeft {
    margin-top: 20px;
    margin-left: 30px;
    width: 1200px;
    display: flex;
    ::v-deep .el-row {
      width: 100%;
    }
    ::v-deep .el-form-item__content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        display: inline-block;
        // margin-left: 50px;
        min-width: 65px;
        font-size: 14px;
      }
    }
  }
  .topSearchRight {
    width: 15%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 50px;
    .elrowBtn {
      margin-left: 10px;
    }
  }
}
// .btnRow {
//   display: block;
//   display: flex;
//   ::v-deep .el-col-6 {
//     display: flex;
//     justify-content: space-around;
//   }
// }

.unBtnRow {
  display: none;
}

.ordershipped {
  // display: flex;
  // flex-direction: column;
  // align-content: center;
  // justify-content: center;
  width: 98%;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  background-color: #fff;
  overflow: hidden;

  .SecondRow {
    width: 100%;
    min-height: 65px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .SecondRowLeft {
      margin-top: 10px;
      margin-left: 25px;
    }
    .SecondRowRight {
      margin-top: 10px;
      margin-right: 30px;
    }
  }
  .DataTableDiv {
    width: 98%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    // border: 1px solid #dcdee2;
    // > div:nth-child(1) {
    //   padding: 10px;
    // }
    //表格
    .flex-container {
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: space-around;
      > img {
        width: 70px;
        height: 70px;
      }
    }
    // .TableAttrTem {
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-around;
    // }
  }
  .paging {
    width: 99%;
    height: 50px;
    // background-color: antiquewhite;
    display: flex;
    align-items: end;
    justify-content: end;
  }
}
</style>
